<script setup>
  import {reactive} from "vue";
  import {ElMessage} from "element-plus";
  import store from "../../store/index.js";
  import router from "../../router/index.js";

  const form = reactive({
    userName: '',
    password: '',
    checkCode: '',
  })
  const signInSure = ()=>{
    //TODO
    ElMessage({
      message: '登陆成功',
      type: 'success'
    })
    const userType = store.getters.getUserType
    if (userType === 0){
      router.push({path: '/studentmain'})
    }else if (userType === 1){
      router.push({path: '/teachermain'})
    }

  }
</script>

<template>
  <div class="area-container">
    <!--登陆表单-->
    <el-form :model="form" label-width="auto" class="form-style">
      <el-form-item label="账号">
        <el-input placeholder="请输入账号（手机号）" v-model="form.userName" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" show-password v-model="form.password" />
      </el-form-item>
      <el-form-item label="验证">
        <div>TODO</div>
      </el-form-item>
    </el-form>
    <!--确定按钮-->
    <el-button @click="signInSure" type="primary" class="sure-btn">确定</el-button>
  </div>
</template>

<style scoped>
  .area-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  ::v-deep .el-form-item__label{
    color: #000000;
    font-size: 16px;
  }
  .form-style{
    margin-top: 24px;
    width: 380px;
    color: #000;
  }
  .sure-btn{
    width: 280px;
    font-size: 17px;
    height: 36px;
    outline: none;
  }
</style>